<template>
  <div id="login">
    <el-form ref="form"
             :model="form"
             label-width="80px">
      <el-form-item label="账号:">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="登录密码:">
        <el-input v-model="form.password"
                  :type="passwordVisible">
          <i slot="suffix"
             :class="icon"
             @click="showPass"></i>
        </el-input>
      </el-form-item>
      <el-form-item label="权限:">
        <el-radio-group v-model="form.type">
          <el-radio label="员工"></el-radio>
          <el-radio label="经理"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item id="btn">
        <el-button type="primary"
                   @click="onSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      form: {
        username: "",
        password: "",
        type: "员工",
      },
      passwordVisible: "password",
      icon: "el-icon-view",
    };
  },
  methods: {

    //登录判断 token sessionStorage
    onSubmit: function () {
      this.$axios({
        url: "/yl/login/getuser",
        params: this.form,
      }).then((res) => {
        if (res.data.data.length) {
          if (res.data.data[0].user_position == "员工") {
            this.$message({
              message: "登陆成功",
              type: "success",
              duration: 2000,
            });
            this.$router.push({ path: "/employee/homepageemployee" });
            sessionStorage.setItem("user", JSON.stringify(res.data.data[0]));
            sessionStorage.setItem("token", res.data.token);
          } else {
            this.$message({
              message: "登陆成功",
              type: "success",
              duration: 2000,
            });
            this.$router.push({ path: "/manage/homepage" });
            sessionStorage.setItem("user", JSON.stringify(res.data.data[0]));
            sessionStorage.setItem("token", res.data.token);
          }
        } else {
          this.$message.error("账号或密码错误", {
            duration: 2000,
          });
        }
      });
    },

    //密码隐藏显示
    showPass () {
      if (this.passwordVisible === "text") {
        this.passwordVisible = "password";
        //更换图标
        this.icon = "el-icon-view";
      } else {
        this.passwordVisible = "text";
        this.icon = "el-icon-lock";
      }
    },
  },
};
</script>
<style scoped lang="less">
#login {
  height: 100%;
  background-image: url(../assets/single/Login.png);
  background-size: cover;
}
.el-form {
  width: 400px;
  height: 280px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -220px;
  margin-top: -160px;
  background: rgba(255, 255, 255, 0.3);
  padding-top: 40px;
  padding-right: 40px;
  background-color: rgb(248, 248, 248);
  border: 1px solid lightblue;
  border-radius: 5px;
}
#btn {
  margin-left: 80px;
  width: 80px;
  height: 40px;
}
</style>